<template>
	<el-dialog :visible.sync="dialogVisible" title="编辑渠道信息" width="900px" :close-on-click-modal="false" v-drag2anywhere>
		<el-form :model="formData" label-width="100px" :rules="rules" ref="formData">
			<el-row>
				<el-col :span="12">
					<el-form-item label="渠道名称:" prop="title">
						<el-input v-model="formData.title" placeholder="渠道名称"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="启用状态:" prop="enabled">
						<el-switch v-model="formData.enabled"></el-switch>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="折扣率:" prop="rate">
						<el-input v-model="formData.rate" style="width: 80px;">
							<span slot="suffix">%</span>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="排序索引:" prop="order">
						<el-input-number v-model="formData.order" :step="1"></el-input-number> 值越大越靠前显示
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col>
					<el-form-item label="折扣说明:">
						<el-input type="textarea" rows="3" v-model="formData.ratememo" maxlength="255" show-word-limit
							placeholder="折扣说明"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col>
					<el-form-item label="备注信息:">
						<el-input type="textarea" rows="5" v-model="formData.memo" placeholder="备注信息"></el-input>
					</el-form-item>
				</el-col>
        <el-col>
          <el-form-item label="渠道链接:">
            <el-input v-model="formData.website" placeholder="请输入平台链接地址"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="渠道登录信息:">
             <el-input type="textarea" rows="5" v-model="formData.info" placeholder="渠道登录信息"></el-input>
          </el-form-item>
        </el-col>
			</el-row>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false" size="medium">取 消</el-button>
			<el-button type="primary" size="medium" @click="handleSave">保存</el-button>
		</div>
	</el-dialog>
</template>

<script>
	export default {
		data() {
			return {
				index: -1,
				formData: {
					id: -1,
					title: '',
					enabled: true,
					order: 0,
					rate: 88,
					ratememo: '',
					memo: '',
          website:'',
          info:''
				},
				rules: {
					title: [{
						required: true,
						message: "请选择上架目标平台",
						trigger: "blur"
					}],
					rate: [{
						required: true,
						message: "平台折扣率不能为空",
						trigger: "blur"
					}],
					order: [{
						required: true,
						message: "排序索引不能为空!",
						trigger: "blur"
					}]
				},
				dialogVisible: true
			}
		},
		methods: {
			initData(index, data) {
				this.index = index;
				this.formData = JSON.parse(JSON.stringify(data));
				this.formData.enabled = this.formData.enabled == 1 ? true : false;
			},
			handleSave: function() {
				if (this.$refs.formData.validate((ok) => {
						if (ok) {
							let params = {
								id: this.formData.id,
								title: this.formData.title,
								enabled: this.formData.enabled ? 1 : 0,
								rate: this.formData.rate,
								ratememo:this.formData.ratememo,
								order: this.formData.order,
								memo: this.formData.memo,
                website:this.formData.website,
                info:this.formData.info
							}
              this.axios.post("/api/admin/platform/update", params).then((res) => {
								if (res.status == 200 && res.data.code == 0) {
									this.$message({
										message: "更新渠道信息成功!",
										showClose: true,
										type: 'success',
										duration: 1500
									});
								} else {
									this.$message({
										message: "更新渠道信息失败!",
										showClose: true,
										type: 'success',
										duration: 1500
									});
								}
								this.dialogVisible = false;
								this.$emit("closeHandler", this.index, this.formData);
							})
						}
					}));
				console.log(this.formData);
			}
		}
	}
</script>

<style>
	.title {
		position: relative;
		padding-left: 10px;
		margin-bottom: 15px;
		font-size: 14px;
		color: #333;
		font-weight: 700;
	}

	.title:before {
		content: "";
		position: absolute;
		top: 4px;
		left: 0;
		width: 5px;
		height: 65%;
		background-color: #249af3;
	}


	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 80px;
		height: 80px;
		line-height: 80px;
		text-align: center;
	}

	.avatar {
		width: 80px;
		height: 80px;
		display: block;
	}
</style>
